<template>
  <div class="app-container">
    <div class="collect-ota">
      <h2>配置名称:{{detailInfo.name}}</h2>
      <el-form v-column="4" :model="dataFilter" ref="formRef">

        <el-form-item label="状态" prop="status">
          <el-select 
            v-model="dataFilter.status" 
            clearable 
            placeholder="请选择"
          >
            <el-option label="待开始" :value="0" />
            <el-option label="进行中" :value="1" />
            <el-option label="已完成" :value="2" />
            <el-option label="未完成" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称" prop="equipName">
          <el-input v-model="dataFilter.equipName" placeholder="请输入"/>
        </el-form-item>

        <el-form-item label="设备MAC" prop="macCode">
          <el-input v-model="dataFilter.macCode" placeholder="请输入"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="sourceData.list"
        highlight-current-row
        stripe
      >
        <el-table-column label="设备名称" prop="equipName" />
        <el-table-column label="设备MAC" prop="macCode" />
        <el-table-column label="当前软件版本" prop="pkgVersion" />
        <el-table-column label="配置状态" prop="status">
          <!-- 四种状态 -->
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="info">待推送</el-tag>
            <el-tag v-else-if="row.status === 1" type="success">已推送</el-tag>
            <el-tag v-else-if="row.status === 2" type="warning">升级中</el-tag>
            <el-tag v-else-if="row.status === 3" type="success">升级成功</el-tag>
            <el-tag v-else="row.status === 4" type="danger">升级失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态更新时间" prop="updateTime" />
      </el-table>
      <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getList" />

    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { remoteConfigList } from '@/api/collect'
import Pagination from '@/components/Pagination/Index.vue'
const formRef = ref()

const dataFilter = reactive({
  id: null,
  status: null,
  equipName: '',
  macCode: '',
})

const detailInfo = reactive({
  name: null,
  ver: null,
})

const route = useRoute()

dataFilter.id = parseInt(route.query.id)

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const sourceData = reactive({
  list: [] as any,
})

const getList = () => {
  remoteConfigList({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...dataFilter
  }).then((res)=>{
    console.log('res', res)
    sourceData.list = res.data.records
    // TODO use real api total res total
    pageProps.value.total = res.data.total
  })
  .catch((err) => {
    console.error('err', err)
  })
}

getList()

const onSearch = () => {
  getList()
}

</script>

<style scoped>
.app-container {
  flex: 1;
  .collect-ota {
    h2 {
      font-size: 16px;
      margin: 13px 0 24px;
    }
  }
}
</style>